<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理系统</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
<div id="app">
    <el-input v-model="contacts"  placeholder="请输入用户名称" style="width: 280px"></el-input>
    <el-input v-model="enterpriseName"  placeholder="请输入企业名称" style="width: 280px"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="chaxun">查询</el-button><br>
    <el-button type="primary" @click="check">查询所有</el-button>
    <template>
        <el-table
                :data="enterprises"
                style="width: 100%">
            <el-table-column
                    prop="number"
                    label="企业编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="代理商"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.role }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="contacts"
                    label="联系人">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.contacts }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="enterpriseName"
                    label="企业名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.enterpriseName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系电话">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.address }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="range"
                    label="经营范围">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.range }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="establishTime"
                    label="创建时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.establishTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="expireTime"
                    label="到期时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.expireTime }}</span>
                </template>
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="accountstatus"-->
<!--                    label="状态">-->
<!--                <template slot-scope="scope">-->
<!--                    <span style="margin-left: 10px">{{ scope.row.accountStatus==1?"已启用":"未启用" }}</span>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column
                    label="账号状态"
                    width="180">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.accountStatus"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="statusMe(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="current"
                @current-change="loadEnterprises">
        </el-pagination>
    </template>


    <el-dialog v-loading="loading" :visible.sync="dialogFormVisible" width="800px">
        <h1 style="text-align: center; margin-top: -30px;">详情</h1>
        <table class="table1">
            <tr>
                <td>id：{{enterprise.id}}</td>
                <td>编号：{{enterprise.number}}</td>
                <td>角色：{{enterprise.role}}</td>
            </tr>
            <tr>
                <td>用户名称：{{enterprise.enterpriseName}}</td>
                <td>电话：{{enterprise.phone}}</td>
            </tr>
            <tr>
                <td>地址：{{enterprise.address}}</td>
                <td>经营范围：{{enterprise.range}}</td>
            </tr>
            <tr>
                <td>创建时间：{{enterprise.establishTime}}</td>
                <td>到期时间：{{enterprise.expireTime}}</td>
            </tr>
            <tr>
                <td>账号状态：{{enterprise.accountStatus==1?"已激活":"未激活"}}</td>
            </tr>
        </table>
    </el-dialog>



</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                enterprises:[],
                enterprise:{},
                total: 0,
                current: 0,
                pageSize: 10,
                dialogRoleFormVisible:false,
                dialogFormVisible:false,
                contacts:null,
                enterpriseName:null,

            }
        },
        methods:{
            loadEnterprises(current) {
                axios.get("/tEnterprises/page?current=" + current)
                    .then(res => {
                        console.log(res.data)
                        this.enterprises = res.data.data;
                        this.total = res.data.current;
                        this.current = res.data.total;
                        this.enterprises.forEach(re=>{
                            if(re.accountStatus=="1"){
                                re.accountStatus=true
                            }else {
                                re.accountStatus=false
                            }
                        })

                    });


            },

            handleEdit(index,row){
                this.enterprise = row;
                this.dialogFormVisible = true;
            },

            chaxun(){
                console.log(this.value)

                if(this.contacts==""){
                    this.contacts =null
                }
                if(this.enterpriseName==""){
                    this.enterpriseName =null
                }
                axios.get("/tEnterpriseLike/like/"+this.current+"/"+this.pageSize+"/"+this.contacts+"/"+this.enterpriseName)
                    .then(res => {
                        this.enterprises = res.data.records;
                        this.total = res.data.current;
                        this.current = res.data.total;
                    });
            },
            check(){
                this.loadEnterprises(1)
            },

            statusMe(row) {
                if(row.accountStatus){
                    row.accountStatus="1"
                }else {
                    row.accountStatus="-1"
                }
                axios.get("/tEnterprises/"+row.id+"/"+row.accountStatus).then(res=>{
                    this.loadEnterprises(1);
                })

            },

        },
        mounted(){
            this.loadEnterprises(1);
        }
    })
</script>
</body>
</html>